// import React, { useMemo, useState } from "react"
// interface User{
//     name:string,
//     age:number,
//     email:string,
// }
// interface CardProps {
//     user:User
// }
// const Card = function ({user}:CardProps){
//     console.log("Card render")
//     const Styles = {
//         backgroundColor: 'lightblue',
//         padding: '20px',
//         borderRadius: '10px',
//         margin: '10px'
//     }
//     return <div style={Styles}>
//         <div>{user.name}</div>
//         <div>{user.age}</div>
//         <div>{user.email}</div>
//     </div>
// }
// function UseMemoHook() {
// const [users,setUsers] = useState<User>({
//       name: '张三',
//       age: 18,
//       email: 'zhangsan@example.com'
// })
// const [search,setSearch] = useState('')
//     return (
//         <div>
//             <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
//             <Card user={users} />
//         </div>
//     )
// }


// import React, { useMemo,useState } from "react"
// interface User{
//     name:string,
//     age:number,
//     email:string,
// }
// interface CardProps {
//     user:User
// }
// const Card = React.memo(function({user}:CardProps){
//     console.log('Card render');
//     const styles = {
//         backgroundColor: 'lightblue',
//         padding: '20px',
//         borderRadius: '10px',
//         margin: '10px'
//      }
//     return <div style={styles}>
//         <div>{user.name}</div>
//         <div>{user.age}</div>
//         <div>{user.email}</div> 
//     </div>
// })

// function UseMemoHook(){ 
//     const [users,setUsers] = useState<User>({
//         name: '张三',
//         age: 18,
//         email: 'zhangsan@example.com'
//     })
//     const [search,setSearch] = useState('')
//     return (
//         <div>
//             <h1>父组件</h1>
//             <input type="text" value={search} onChange={(e) => setSearch(e.target.value)}/>
//             <div>
//                 <button onClick={() => setUsers({
//                     name: '李四',
//                     age: 20,
//                     email: 'lisi@example.com'
//                 })}>更新user</button>
//                 <Card user={users}/>
//             </div>
//         </div>
//     )
// }


/**
 * TODO
 * 如下是不适用useMemo和使用useMemo
 */
import React, { useMemo, useState } from 'react';

function UseMemoHook() {
   const [search, setSearch] = useState('');
   const [goods, setGoods] = useState([
      { id: 1, name: '苹果', price: 10, count: 1 },
      { id: 2, name: '香蕉', price: 20, count: 1 },
      { id: 3, name: '橘子', price: 30, count: 1 },
   ]);
   const handleAdd = (id: number) => {
      setGoods(goods.map(item => item.id === id ? { ...item, count: item.count + 1 } : item));
   }
   const handleSub = (id: number) => {
      setGoods(goods.map(item => item.id === id ? { ...item, count: item.count - 1 } : item));
   }
   const total = () => {
      console.log('total');
      //例如很复杂的计算逻辑
      return goods.reduce((total, item) => total + item.price * item.count, 0)
   }
   return (
      <div>
         <h1>父组件</h1>
         <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
         <table border={1} cellPadding={5} cellSpacing={0}>
            <thead>
               <tr>
                  <th>商品名称</th>
                  <th>商品价格</th>
                  <th>商品数量</th>
               </tr>
            </thead>
            <tbody>
               {goods.map(item => <tr key={item.id}>
                  <td>{item.name}</td>
                  <td>{item.price * item.count}</td>
                  <td>
                     <button onClick={() => handleAdd(item.id)}>+</button>
                     <span>{item.count}</span>
                     <button onClick={() => handleSub(item.id)}>-</button>
                  </td>
               </tr>)}
            </tbody>
         </table>
         <h2>总价：{total()}</h2>
      </div>
   );
}
export default UseMemoHook